<template>
	<div class="ebook-bookmark" ref="bookmark">
		<div class="ebook-bookmark-text-wrapper">
			<div class="ebook-bookmark-down-wrapper" ref="iconDown">
				<span class="icon-down"></span>
			</div>
			<div class="book-bookmark-text">{{text}}</div>
		</div>
		<div class="ebook-bookmark-icon-wrapper" :style="isFixed ? fixedStyle : {}">
			<bookmark :color="color" :width="15" :height="35"></bookmark>
		</div>
	</div>
</template>

<script>
import { realPx } from '../../utils/utils'
import Bookmark from '../common/Bookmark'
import { ebookMixin } from '../../utils/mixin'
import { getBookmark, saveBookmark } from '../../utils/localStorage'

const BLUE = '#346cbc'
const WHITE = '#fff'
export default {
	mixins: [ebookMixin],
	components: {
		Bookmark
	},
	computed: {
		height() {
			return realPx(35)
		},
		threshold() {
			return realPx(55)
		},
		fixedStyle() {
			return {
				position: 'fixed',
				top: 0,
				right: `${(window.innerWidth - this.$refs.bookmark.clientWidth) / 2}px`		
			}
		}
	},
	watch: {
		offsetY(v) {
			if (!this.bookAvailable || this.menuVisible || this.settingVisible >= 0) {
				return
			}
			if (v >= this.height && v <= this.threshold) {
				this.beforeThreshold(v)
			} else if (v >= this.threshold) {
				this.afterThreshold(v)
			} else if (v > 0 && v < this.height) {
				// 状态一
				this.beforeHeight()
			} else if (v === 0) {
				this.restore()
			}
		},
		isBookmark(isBookmark) { // 初始化书签页的样式
			this.isFixed = isBookmark
			if (isBookmark) {
				this.color = BLUE
			} else {
				this.color = WHITE
			}
		}
	},
	data() {
		return {
			text: '',
			color: WHITE,
			isFixed: false
		}
	},
	methods: {
		addBookmark() { // 添加书签的方法
			this.bookmark = getBookmark(this.fileName)
			// 获取所有的书签页
			if (!this.bookmark) {
				this.bookmark = []
			}
			const currentLocation = this.currentBook.rendition.currentLocation()
			const cfibase = currentLocation.start.cfi.replace(/!.*/, '')
			const cfistart = currentLocation.start.cfi.replace(/.*!/, '').replace(/\)$/, '')
			const cfiend = currentLocation.end.cfi.replace(/.*!/, '').replace(/\)$/, '')
			const cfirange = `${cfibase}!,${cfistart},${cfiend})`
			this.currentBook.getRange(cfirange).then(range => {
				// 获取当前页的文本
				const text = range.toString().replace(/\s\s/g, '')
				this.bookmark.push({
					cfi: currentLocation.start.cfi,
					text: text
				})
				saveBookmark(this.fileName, this.bookmark)
			})
		},
		removeBookmark() { // 删除书签
			const currentLocation = this.currentBook.rendition.currentLocation()
			const cfi = currentLocation.start.cfi
			this.bookmark = getBookmark(this.fileName)
			if (this.bookmark) {
				this.bookmark = this.bookmark.filter(item => item.cfi !== cfi)
				saveBookmark(this.fileName, this.bookmark)
				this.setIsBookmark(false)
			}
		},
		restore() { 
			// 状态4： 归位
			setTimeout(() => {
				this.$refs.bookmark.style.top = `${-this.height}px`
				// 图标归位
				this.$refs.iconDown.style.transform = 'rotate(0deg)'
			}, 200)
			if (this.isFixed) {
				this.setIsBookmark(true)
				this.addBookmark()
			} else {
				this.setIsBookmark(false)
				this.removeBookmark()
			}
		},
		beforeHeight() {
			// 状态1：未超过书签的高度
			if (this.isBookmark) { // 判断当前页是否为书签页
				this.text = this.$t('book.pulldownDeleteMark')
				this.color = BLUE
				this.isFixed = true
			} else {
				this.text = this.$t('book.pulldownAddMark')
				this.color = WHITE
				this.isFixed = false
			}
		},
		beforeThreshold(v) {
			// 状态2：未到达临界状态
			this.$refs.bookmark.style.top = `${-v}px`
			this.beforeHeight()
			const iconDown = this.$refs.iconDown
			if (iconDown.style.transform === 'rotate(180deg)') {
				iconDown.style.transform = 'rotate(0deg)'
			}
		},
		afterThreshold(v) {
			// 状态3：超越临界状态
			this.$refs.bookmark.style.top = `${-v}px` 
			if (this.isBookmark) {
				this.text = this.$t('book.releaseDeleteMark')
				this.color = WHITE
				this.isFixed = false
			} else {
				this.text = this.$t('book.releaseAddMark')
				this.color = BLUE
				this.isFixed = true
			}
			const iconDown = this.$refs.iconDown
			if (iconDown.style.transform === '' || iconDown.style.transform === 'rotate(0deg)') {
				iconDown.style.transform = 'rotate(180deg)'
			}
		}
	}
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  // @import url("../../assets/styles/global.scss");
	// $ratio: 375 / 10;

	// @function px2rem($px) {
  //   @return $px / $ratio + rem;
	// }

	// @mixin center {
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// }

	// @mixin left {
	// 	display: flex;
	// 	justify-content: flex-start;
	// 	align-items: center;
	// }

	// @mixin right {
	// 	display: flex;
	// 	justify-content: flex-end;
	// 	align-items: center;
	// }

	// @mixin ellipsis {
	// 	text-overflow: ellipsis;
	// 	overflow: hidden;
	// 	white-space: nowrap;
	// }

	// @mixin ellipsis2($line) {
	// 	display: -webkit-box;
	// 	-webkit-box-orient: vertical;
	// 	-webkit-line-clamp: $line;
	// 	white-space: normal;
	// 	overflow: hidden;
	// 	text-overflow: ellipsis;
	// 	word-break: keep-all;
	// }

	@import "../../assets/styles/global.scss";

	.ebook-bookmark {
		// background-color: #fff;
		position: absolute;
		top: px2rem(-35);
		// top: -100%;
		left: 0;
		z-index: 200;
		width: 100%;
		height: px2rem(35);
		// height: 100%;
		.ebook-bookmark-text-wrapper {
			position: absolute;
			right: px2rem(45);
			bottom: 0;
			display: flex;
			.ebook-bookmark-down-wrapper {
				font-size: px2rem(14);
				color: white;
				transition: all .2s linear;
				@include center;
			}
			.book-bookmark-text {
				font-size: px2rem(14);
				color: white;
			}
		}
		.ebook-bookmark-icon-wrapper {
			position: absolute;
			right: 0;
			bottom: 0;
			margin-right: px2rem(15);
		}
	}
</style>
